<template>
  <div class="hellow">
    <p>{{currentNow}}-{{currentNow}}</p>
    <p>状态:{{tab_partents_status[0]}}---状态:{{tab_partents_status[1]}}---状态:{{tab_partents_status[2]}}</p>
      <div class="tab">
         <ul>
           <template  v-for="(item, index) in tab_partents_status">
              <li :class="{active:item=='active',finish:item=='finish'}" @click="changeShowIndex(index)">
                <p>{{item}}</p>
              <span></span>
             </li>
           </template>
           
         </ul>
      </div>
      <div class="tab_cnt">
        <ul>
            <li :class="{active:tab_partents_status[0]=='active',finish:tab_partents_status[0]=='finish'}" v-if="(tab_partents_status[0]=='active'&&tab_partents_show_index==0)||tab_partents_show_index==0">
              <p class="strong">]]]]]]]]]]]]]]]]]第一个[[[[[[[[[[[[[[[[[[[[[ 状态:{{tab_partents_status[0]}}</p>
              <div class="children_tab">
                  <count-timera  :current="currentNow"/>
              </div>
            </li>
              <li :class="{active:tab_partents_status[1]=='active',finish:tab_partents_status[1]=='finish'}" v-if="(tab_partents_status[1]=='active'&&tab_partents_show_index==1)||tab_partents_show_index==1">
               <p class="strong">]]]]]]]]]]]]]]]]]第而二个[[[[[[[[[[[[[[[[[[[[[  状态:{{tab_partents_status[1]}}</p>
               <div class="children_tab">
                    <count-timerb  :current="currentNow"/>
               </div>
            </li>
               <li :class="{active:tab_partents_status[2]=='active',finish:tab_partents_status[2]=='finish'}" v-if="(tab_partents_status[2]=='active'&&tab_partents_show_index==2)||tab_partents_show_index==2">
               <p class="strong">]]]]]]]]]]]]]]]]]第三个[[[[[[[[[[[[[[[[[[[[[  状态:{{tab_partents_status[2]}}</p>
                  <div class="children_tab">
                       <count-timerc  :current="currentNow"/>
                 </div>
            </li>
        </ul>
      </div>
  </div>
</template>

<script>
import { CountTimer } from "../lib/CountTimer";
import Vue from "vue";
// const components = {
//   countTimera: import("../components/countTimer1.vue"),
//   countTimerb: import("../components/countTimer2.vue"),
//   countTimerc: import("../components/countTimer3.vue")
// };

import countTimera from "../components/countTimer1.vue";
import countTimerb from "../components/countTimer2.vue";
import countTimerc from "../components/countTimer3.vue";

export default {
  name: "countTimer",
  data() {
    return {
      now: "2018-01-17 22:10:10",
      currentNow: "", //计算后的当前时间
      //父级tab的开启和结束时间
      tab_partents: [
        {
          start: "2018-01-17 22:10:10",
          end: "2018-01-17 22:10:20"
        },
        {
          start: "2018-01-17 22:10:21",
          end: "2018-01-17 22:10:31"
        },
        {
          start: "2018-01-17 22:10:32",
          end: "2018-01-17 22:10:42"
        }
      ],
      tab_partents_show_index: 0,
      //父级tab的状态  "no_start"：未开启 "active"：开启中 "finish" ：已经完成
      tab_partents_status: ["no_start", "no_start", "no_start"]
    };
  },
  created() {
    this.timeDown();
  },
  methods: {
    filter() {
      this.tab_partents.forEach((item, index) => {
        //console.log(index,this.currentNow, +new Date(item.start))
        //当前时间大于活动的结束时间，那么活动就是结束
        if (this.currentNow < +new Date(item.start)) {
          //当前时间小于活动开始时间，那么就是活动未开始
          // this.tab_partents_status[index] == "no_start";
          Vue.set(this.tab_partents_status, index, "no_start");
          console.log("未开启", index);
        } else if (this.currentNow >= +new Date(item.end)) {
          // this.tab_partents_status[index] == "finish";
          Vue.set(this.tab_partents_status, index, "finish");
          console.log("结束", index);
        } else {
          //否者就是开始和结束之间，就是活动被激活了
          //this.tab_partents_status[index] == "active";
          Vue.set(this.tab_partents_status, index, "active");
          this.tab_partents_show_index = index;
          console.log("激活", index);
        }
      });
    },
    changeShowIndex(index) {
      this.tab_partents_show_index = index;
    },
    timeDown() {
      return new CountTimer({
        type: "timeUpdate",
        now: "2018-01-17 22:10:10",
        during: now => {
          this.currentNow = now;
          this.filter();
        },
        end: () => {}
      });
    }
  },
  components: { countTimera, countTimerb, countTimerc }
};
</script>

<style lang="less" scoped >
ul,
li {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}

.children_tab {
  border: 10px blue solid;
  background: #fff;
  margin:20px;
}
.hellow{
  border:5px solid red;
  margin:30px;
  box-sizing: border-box;
  padding:30px;
}
.strong{
  color:blue;
}
.tab {
  position: relative;
  ul {
    text-align: center;
    position: relative;
    font-size: 0;
    &:after {
      content: "";
      display: block;
      height: 10px;
      width: 100%;
      background: #333;
      top: 10px;
      position: absolute;
      z-index: 10;
    }
  }
  li {
    display: inline-block;
    position: relative;
    font-size: 16px;
    z-index: 12;
    width: 33.3%;
    box-sizing: border-box;
    margin-bottom: 20px;
    p {
      position: absolute;
      top: -30px;
      width: 100%;
      text-align: center;
    }
    &.active {
      span {
        background: orange;
      }
      &:before {
        content: "";
        width: 100%;
        height: 10px;
        top: 10px;
        left: 0;
        position: absolute;
        background: orange;
      }
    }
    &.finish {
      span {
        background: orange;
      }
      // &:after {
      //   content: "";
      //   width: 50%;
      //   height: 10px;
      //   top: 10px;
      //   left: 50%;
      //   position: absolute;
      //   background: #999;
      // }
      &:before {
        content: "";
        width: 100%;
        height: 10px;
        top: 10px;
        left: 0;
        position: absolute;
        background: orange;
      }
    }
    & + li {
      padding-left: 20px;
    }
    span {
      display: block;
      // margin: 0 auto;
      position: absolute;
      top: 0;
      right: 0;
      width: 30px;
      height: 30px;
      background: #333;
      border-radius: 100%;
    }
  }
}
.tab_cnt {
  border: 1px solid #333;
  padding: 10px;
  li {
    background: #333;
    padding:10px;
  }
  .active {
    background: orange;
  }
  .finish {
    background: #999;
  }
  p {
    text-align: center;
    line-height: 60px;
    font-size: 30px;
  }
}
</style>
